<template>
  <el-dialog
      :model-value="props.dialogVisible"
      :title="props.dialogIotTitle"
      width="25%"
      @close="handleClose"
  >
    <el-form size="default" :model="form" ref="formRef" label-width="80px" :rules="rules" label-position="right" >
        <el-form-item label="产地名称" prop="chandi">
            <el-select v-model="form.chandi" clearable placeholder="请选择">
                <el-option
                        v-for="(item, index) in chandiName"
                        :key="index"
                        :label="item"
                        :value="item"
                />
            </el-select>
        </el-form-item>
      <el-form-item label="PH值" prop="ph">
        <el-input v-model="form.ph" clearable/>
      </el-form-item>
      <el-form-item label="土壤温度" prop="trsd">
        <el-input v-model="form.trwd" clearable/>
      </el-form-item>
      <el-form-item label="土壤湿度" prop="trsd">
        <el-input v-model="form.trsd" clearable/>
      </el-form-item>
      <el-form-item label="更新日期" prop="gxrq">
        <el-date-picker
            v-model="form.gxrq"
            type="date"
            placeholder="选择日期"
            clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineEmits, ref, defineProps, watch, onMounted} from 'vue'
import {djzhInfo, getAllCdmc} from "@/api/apiPath/twoPart.js";
import {ElNotification} from "element-plus";
import {get} from "@/utils/axiosMethod.js";
import {getOptionsInfo} from "@/api/methods/initInfo.js";
import {chandiByStatus} from "@/api/apiPath/onePartApi.js";

const props = defineProps({
  dialogIotTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogIotTableValue: {
    type: Object,
    default: {}
  },
  queryForm: {
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const chandiName = ref([])
const formRef = ref(null)

const form = ref({
  bh: '',
    qymc: '',
    chandi: '',
    ph: '',
    trwd: '',
    trsd: '',
    gxrq: '',
})
onMounted(()=> {
  form.value = props.dialogIotTableValue
    getOptionsInfo(chandiByStatus(), chandiName)
})
const disable = ref(true)
const regex = /^(?!\s*$).+/
watch(()=> form.value.nydjzh, (nydjzh)=> {
  console.log(nydjzh)
  disable.value = !regex.test(nydjzh)
  if (nydjzh === null || typeof nydjzh === "undefined") {
    disable.value = true
  }
}, {deep: true, immediate: true})

const rules = ref({
    chandi: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
    ph: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
    gxrq: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
})
const emits = defineEmits(['update:modelValue', 'handleConfirm'])
const handleClose = ()=> {
  emits('update:modelValue', false)
}
const handleConfirm = () => {
  emits("handleConfirm", {...form.value}, {...formRef.value})
}
const selectTrpInfo = async (nydjzh) => {
  try {
    if (nydjzh === null) return null
    get(djzhInfo(nydjzh), (data)=> {
      console.log(data)
      if (data === null) return null
      form.value = data
    })
  } catch (err) {
    console.log("ErrorselectTrpInfo" + err)
    ElNotification({
      message: "请求失败~",
      type: 'error',
      duration: 1500
    })
  }
}

</script>

<style scoped>

</style>


















<!--
const selectTrpInfo = async (nydjzh) => {
try {
let res = await djzhInfo(nydjzh)
// console.log(res)
form.value = res.data
} catch (err) {
console.log("ErrorselectTrpInfo" + err)
ElNotification({
message: "请求失败~",
type: 'error',
duration: 1500
})
}


}-->
<!--      <el-form-item  v-for="(item, index) in addPurchaseInfo" :label="item.label" :prop="item.prop">
        <template v-if="item.prop === 'trpmc'">
&lt;!&ndash;          <el-input v-model="form[index]" size="large" disabled/>&ndash;&gt;
          <el-select v-model="form[index]"  placeholder="请选择" size="default">
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </template>
        <template v-else-if="item.prop === 'rq'">
              <el-date-picker
                  v-model="form[index]"
                  type="date"
                  placeholder="选择日期"
                  :size="'large'"
                  clearable
              />
        </template>
        <template v-else>
          <el-input v-model="form[index]" size="default" clearable/>
        </template>
      </el-form-item>-->